<template>
  <div id="custom_navigation" :style="{ color: white ? 'white' : 'black' ,...styles, height: `${headerHeight().allHeight}px`}">
    <div :style="{height: `${headerHeight().wxH}px`, marginTop: `${headerHeight().top}px`, transform: `translateY(${headerHeight().sysH}px)`}" class="content">
      <slot>
        <div v-if="back" class="back"><Icon :name="white ? 'icon-youjiantou1' : 'icon-youjiantou'" size="46" @tap.stop="goBack" /></div>
        <div v-if="home" class="back"><Icon :name="white ? 'icon-youjiantou1' : 'icon-youjiantou'" size="46" @tap.stop="goHome" /></div>
        <div class="title">{{ title }}</div>
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue'
import Icon from '@C/Icon.vue'
import type { IObj } from '@/interface'
import { Router, routes } from '@/router'

const props = defineProps({
  styles: {
    type: Object as PropType<IObj>,
    required: false,
    default: () => ({}),
  },
  title: {
    type: String,
    required: false,
    default: '',
  },
  back: {
    type: Boolean,
    required: false,
    default: false,
  },
  home: {
    type: Boolean,
    required: false,
    default: false,
  },
  white: {
    type: Boolean,
    required: false,
    default: false,
  },
})
const title = computed(() => props.title || routes.filter((r: IObj) => r.path === getCurrentPages()[getCurrentPages().length - 1].route)[0].title)
const headerHeight = () => {
  // 状态栏
  const systemH = uni.getSystemInfoSync().statusBarHeight as number
  // 微信小程序导航栏
  const wxNavi = wx.getMenuButtonBoundingClientRect()
  return {
    sysH: systemH,
    // wxH: wxNavi.height + wxNavi.top / 2,
    wxH: wxNavi.height,
    top: wxNavi.top - systemH,
    wxNavi,
    // allHeight: systemH + wxNavi.height + wxNavi.top / 2,
    allHeight: systemH + wxNavi.height + wxNavi.top - systemH,
  }
}
const goBack = () => {
  Router.back()
  emits('goBack')
}
const goHome = () => Router.reLaunch('workbench')

defineExpose({
  headerHeight,
  goBack,
  goHome,
})
const emits = defineEmits(['goBack'])
</script>

<style lang="less" scoped>
#custom_navigation {
  z-index: 1000;
  width: 100vw;
  background: white;
}
.content {
  width: 100vw;
  display: flex;
  align-items: center;
  font-size: 34rpx;
  z-index: 999;
  position: relative;
  .back {
    transform: rotate(180deg);
    position: absolute;
    z-index: 1000;
    //top: 16rpx;
    left: 6rpx;
  }
  .title {
    width: 100%;
    text-align: center;
    font-size: 32rpx;
    font-weight: 700;
    z-index: 999;
  }
}
</style>
